<!DOCTYPE html>
<html>
  <head>
    <title>图片合成预览</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--jquery-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

    <!--矢量图绘制框架-->
    <script src="js/raphael/raphael.min.js"></script>
    <script src="js/svg/svg.js"></script>

    <!--拖拽插件-->
    <script src="js/svg/svg.draggable.js"></script>

    <!--png转换插件-->
    <script type="text/javascript" src="js/converter//saveSvgAsPng.js"></script>

    <!--设计器组件-->
    <script src="js/design/design.js"></script>

    <!--fabric-->
    <script src="js/fabric/fabric.min.js"></script>

    <!--业务适配器-->
    <script>
      /**
       *创建一张合成图片
       *
       * @param {*} el 输出到哪个dom节点
       * @param {*} width 图片的宽度
       * @param {*} height 图片的高度
       * @param {*} bgimg 背景图片
       * @param {*} goodprice 商品的价格
       * @param {*} goodimg 商品的图片
       * @param {*} goodname 商品的名称
       */
      function draw(el, width, height, bgimg, goodprice, goodimg, goodname) {
        var design = new Design("canvas", {
          paper: {
            el: el,
            width: width,
            height: height
          },
          ui: {
            type: "set",
            children: [
              {
                type: "image",
                x: 0,
                y: 0,
                width: width,
                height: height,
                src: bgimg
              },
              {
                type: "image",
                x: 0,
                y: 0,
                width: 320,
                height: 150,
                src: goodimg
              },
              {
                type: "text",
                x: 100,
                y: 400,
                width: 100,
                height: 100,
                content: goodname,
                color: "black",
                size: 20
              },
              {
                type: "text",
                x: 200,
                y: 400,
                width: 100,
                height: 100,
                content: goodprice,
                color: "black",
                size: 30
              }
            ]
          }
        });
      }
    </script>

    <script>
      //加载成功后
      $(function() {
        //创建分享图片
        draw(
          "canvas",
          320,
          700,
          "https://upload.slikfresh.com/img1/20191112/eOvPVBc5RHVrHgBR_innnerhtml.jpg",
          "30/斤",
          "https://upload.slikfresh.com/img1/20191111/QeblT1AEdSDQHJfVokg_width.",
          "测试商品"
        );

        alert($("#canvas").html());
        var fb = fabric.loadSVGFromString($("#canvas").html());
        alert(fb);
        //通过插件拿到png的base64再替换原有DOM
        // svgAsPngUri(document.getElementById("canvas").querySelector("svg"), {
        //   canvg: canvg
        // }).then(function(uri) {
        //   alert(uri);
        //   var image = new Image();
        //   image.src = uri;
        //   $("#canvas").html("");
        //   $("#canvas").append($(image));
        // });
      });
    </script>
  </head>
  <body>
    <div id="canvas"></div>
  </body>
</html>
